<template>
  <div class="container-item-mask" v-if="getVuex.show" @click="close">
    <itemLayergb :type="getVuex.type">
      <template v-slot:title>
        <div v-html="getVuex.data.title"></div>
      </template>
      <template v-slot:tag>
        <itemTag :value="getVuex.data.tag | cover"></itemTag>
      </template>
      <template v-slot:shuoming>
        <div>
          <div v-html="getVuex.data.description"></div>
          <div v-if="getVuex.type=='html5' " style="text-align:center"><img :src="QRCodeImg"></div>
        </div>
      </template>
      <template v-slot:danwei>
        <div v-for="(temp, index) in com_procucer" :key="index">{{temp}}</div>
      </template>
    </itemLayergb>

    <!-- 长图/海报项目显示板块 -->
    <div v-if="getVuex.type == 'longPic' || getVuex.type == 'poster' " class="item-block-longpic">
      <img class="item-longpic" :src="nowShowImage">
    </div>

    <!-- 海报项目切换板块 -->
    <div v-if="getVuex.type == 'poster' " class="item-block-poster">
      <swiper :options="swiper">
        <swiperSlide v-for="(temp,index) in imageList" :key="index">
          <el-image class="item-poster" :class="nowShowImage == temp ? 'active' : '' " fit="cover" :src="temp" @click="changeShow(index)"></el-image>
        </swiperSlide>
      </swiper>
    </div>

    <!-- 视频播放板块 -->
    <div v-if="getVuex.type == 'video' "  >
      <!-- 视频播放板块 -->
      <video class="item-block-video" width="100%" autoplay :src="getVuex.data.href"></video>
    </div>

  </div>
</template>

<script>
import itemLayergb from "@/components/miva-item/item-layerbg";
import itemTag from "@/components/miva-item/item-tag";
import QRCode from "qrcode";
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  filters: {
    cover(posters) {
      console.log(posters);
      if (!posters) return [];
      return posters.split(",");
    }
  },
  components: { itemLayergb, itemTag, swiper, swiperSlide },
  computed: {
    getVuex() {
      return this.$store.state.checkData;
    },
    com_procucer() {
      const val = this.getVuex.data.procucer;
      if (!val) return [];
      return val.split(",");
    },
    imageList() {
      const img = this.getVuex.data.poster;
      console.log(img);
      if (!img) return [];
      return [...img.split(",")];
    },
    nowShowImage() {
      const img = this.getVuex.data.poster;
      console.log(img);
      if (!img) return [];
      return img.split(",")[this.nowShowIndex];
    }
  },
  watch: {
    getVuex(val) {
      this.createdQRCode(val.data.href);
    }
  },
  data() {
    return {
      nowShowIndex: 0,
      QRCodeImg: "",
      swiper: {
        slidesPerView: 3,
        centeredSlides: true
      }
    };
  },
  created() {
    this.createdQRCode(this.getVuex.data.href);
  },
  methods: {
    changeShow(img) {
      event.stopPropagation();
      event.preventDefault();
      console.log(img);
      this.nowShowIndex = img;
    },
    close() {
      this.$store.commit("CLOSE_MASK");
    },
    // 生成二维码
    createdQRCode(href = "没有添加链接") {
      if (!href) {
        href = "没有添加链接";
      }
      QRCode.toDataURL(href, { type: "terminal" }, (err, url) => {
        console.log(url);
        this.QRCodeImg = url;
      });
    },
    tags(val) {
      if (!val) return [];
      return val.split(",");
    }
  }
};
</script>

<style lang="less" scoped>
.container-item-mask {
  width: 100%;
  min-width: 1400px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.7);
  .item-block-longpic {
    height: 870px;
    width: 470px;
    // background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    .item-longpic {
      width: 100%;
      display: block;
    }
  }
  .item-block-video {
    width: 950px;
    // height: calc(700px * (9 / 16));
    background: #000;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
  }
  .item-block-poster {
    width: 320px;
    height: 200px;
    position: absolute;
    right: 100px;
    bottom: 100px;
    white-space: nowrap;
    .item-poster {
      // width: 100px;
      // height: 100%;
      margin-right: 10px;
      opacity: 0.5;
      &.active {
        opacity: 1;
      }
    }
  }
}
</style>